<template>
  <div class="carbon-emission-plan-box">
    <el-form
      ref="form"
      class="plan-form-top"
      :model="formData"
      :rules="rules"
      label-width="120px"
    >
      <template v-for="(item, index) in formList">
        <el-form-item
          :key="`${item.prop}${index}`"
          :style="item.itemStyle || {}"
          :label="item.name"
          :prop="item.prop"
          :class="item.itemClass"
        >
          <component
            :is="item.componentType || 'el-input'"
            v-if="item.prop"
            v-model="formData[item.prop]"
            :clearable="true"
            :disabled="item.disabled || false"
            :class="item.class"
            v-bind="item.attrConfig || {}"
            @change="handlerSelectData(item)"
          >
            <template v-for="option in item.optionList">
              <el-option
                :key="option.code"
                :label="option.name"
                :value="option.code"
              />
            </template>
          </component>
        </el-form-item>
      </template>
    </el-form>
    <!--  -->
    <div class="sceneinfo-box">
      <el-card class="box-card" shadow="never">
        <div slot="header" class="clearfix">
          <span><i style="color: #cc0000">*</i> 能耗类型及规划碳排(kgCO2)</span>
        </div>
        <div class="box-card-content">
          <div class="item-title">楼栋规划碳排(kgCO2)：</div>
          <el-form
            label-position="top"
            label-width="140px"
            :model="formLabelAlign"
            style="margin-left: 102px"
          >
            <el-form-item label="规划用电碳排">
              <el-input v-model="formLabelAlign.align" disabled />
            </el-form-item>
            <el-form-item label="规划用水碳排">
              <el-input v-model="formLabelAlign.align" disabled />
            </el-form-item>
            <el-form-item label="规划用冷碳排">
              <el-input v-model="formLabelAlign.align" disabled />
            </el-form-item>
            <el-form-item label="规划总碳排">
              <el-input v-model="formLabelAlign.align" disabled />
            </el-form-item>
          </el-form>
        </div>
        <div class="box-card-content">
          <div class="item-title">楼层规划碳排(kgCO2)：</div>
          <!-- 统一规划 -->
          <el-form
            label-position="top"
            label-width="140px"
            :model="formLabelAlign"
            style="margin-left: 102px; position: relative"
          >
            <div
              style="
                position: absolute;
                left: -55px;
                top: 0;
                transform: translate(-50%, 50%);
              "
            >
              统一规划
            </div>
            <el-form-item label="">
              <el-input v-model="formLabelAlign.electric" />
              规划用电碳排
            </el-form-item>
            <el-form-item label="">
              <el-input v-model="formLabelAlign.water" />
              规划用水碳排
            </el-form-item>
            <el-form-item label="">
              <el-input v-model="formLabelAlign.cold" />
              规划用冷碳排
            </el-form-item>
            <el-form-item label="">
              <div class="btn-box" style="width: 100%">
                <el-button type="primary" size="small" @click="setAllValue">确定</el-button>
              </div>
              规划总碳排
            </el-form-item>
          </el-form>
          <!-- 一层 -->
          <div class="floor-box">
            <el-form label-width="102px" :model="formLabelAlign">
              <template v-for="item in planDetailList">
                <el-form-item
                  :key="item.value"
                  :label="item.label"
                  class="item-form-floor"
                  style="width: 100%"
                >
                  <el-input v-model="formLabelAlign.electric" />
                  <el-input v-model="formLabelAlign.water" />
                  <el-input v-model="formLabelAlign.cold" />
                  <el-input v-model="formLabelAlign.align" disabled />
                </el-form-item>
              </template>
            </el-form>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { dictMixin } from '@/mixin/dict'

export default {
  name: 'AddCarbonEmissionPlan',
  mixins: [dictMixin],
  props: {
    // 请求参数
    requestParams: {
      type: Object,
      default: () => ({})
    },
    // 弹窗数据
    popData: {
      type: Object,
      default: () => ({})
    },
    // 弹窗配置
    popConfig: {
      type: Object,
      default: () => ({})
    },
    // 弹窗取消
    close: {
      type: Boolean,
      default: false
    },
    // 弹窗确认
    confirm: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isAdd: true,
      formData: {},
      formList: [
        {
          name: '所属项目',
          prop: 'sceneProjectId',
          componentType: 'el-select',
          optionList: [],
          selectPath: 'commonSelected',
          selectParams: {
            code: 'SceneProjectSelected'
          },
          attrConfig: {
            placeholder: '请选择所属项目',
            options: []
          },
          dataProp: {
            dataType: 'resData',
            nameProp: 'label',
            codeProp: 'value'
          },
          selectStyle: { width: '180px' }
        },
        {
          name: '所属楼栋',
          prop: 'sceneEdificeId',
          componentType: 'el-cascader',
          optionList: [],
          attrConfig: {
            placeholder: '请选择所属楼栋',
            props: {
              checkStrictly: true
            },
            options: []
          }
        },
        {
          name: '生效时间范围',
          componentType: 'el-date-picker',
          prop: 'effectiveTime',
          itemClass: 'width100p',
          attrConfig: {
            placeholder: '年/月/日',
            type: 'daterange',
            rangeSeparator: '至',
            startPlaceholder: '年/月/日',
            endPlaceholder: '年/月/日',
            valueFormat: 'yyyy-MM-dd',
            format: 'yyyy/MM/dd'
          },
          selectStyle: { width: '100%' }
        }
        // {
        //   name: '生效结束日期',
        //   prop: 'effectiveTimeEnd',
        //   attrConfig: { placeholder: '请输入生效结束日期' }
        // }
      ],
      formLabelAlign: {},
      planDetailList: [
        {
          label: '-2层',
          value: '1232131234423'
        },
        {
          label: '-1层',
          value: '123213134234423'
        }
      ]
    }
  },
  computed: {
    rules() {
      return {
        sceneProjectId: [
          { required: true, message: '请选择所属项目', trigger: 'change' }
        ],
        sceneEdificeId: [
          { required: true, message: '请选择所属楼栋', trigger: 'change' }
        ],
        effectiveTime: [
          {
            required: true,
            message: '请选择生效时间范围',
            trigger: ['change', 'blur']
          }
        ]
      }
    },
    // 结束时间
    effectiveTimeEnd() {
      return this.formData['effectiveTime'][1]
    },
    // 开始时间
    effectiveTimeStart() {
      return this.formData['effectiveTime'][0]
    }
  },
  watch: {
    popData: {
      handler(data) {
        this.isAdd = !data.id
        this.formList.forEach((e) => {
          this.$set(this.formData, e.prop, data[e.prop])
        })
        this.$set(this.formData, 'id', data.id)
      },
      deep: true,
      immediate: true
    },
    confirm() {
      const params = {
        ...(this.formData || {})
      }
      this.submit(params)
    },
    formData: {
      handler(val) {
        console.log('-=-=-=val', val)
        const { sceneProjectId, sceneEdificeId } = val
        if (!sceneProjectId || !sceneEdificeId) {
          // this.$set(this.formData, 'effectiveTime', [])
        }
      },
      deep: true
    }
  },
  methods: {
    /**
     * change事件
     */
    handlerSelectData(config) {
      const { prop } = config
      if (prop === 'sceneProjectId') {
        this.queryRooms(this.formData[prop])
      }
      if (prop === 'sceneEdificeId') {
        this.queryFloor(this.formData[prop])
      }
      const Ref = this.$refs[config.prop]
      if (Ref && config.isClosePop) {
        Ref.dropDownVisible = false
      }
    },
    queryFloor(param) {
      if (!param) return
      this.$set(this.formData, 'sceneEdificeId', '')
      this.$api
        .commonSelected({
          code: 'SceneFloorSelected',
          param
        })
        .then((res) => {
          const optionList = res.data || []

          console.log('optionList', optionList)
        })
    },
    queryRooms(param) {
      if (!param) return
      this.$set(this.formData, 'sceneEdificeId', '')
      this.$api
        .commonSelected({
          code: 'SceneEdificeSelected',
          param
        })
        .then((res) => {
          const optionList = res.data.map((item) => ({
            ...item
          }))

          console.log(optionList)
          const item = this.formList[1]
          item.optionList = optionList
          this.$set(this.formData, 1, {
            ...item
          })
          console.log('this.formList', this.formList)
        })
    },
    /**
     * 提交
     */
    submit(params) {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          const res = await this.$api.carbonEmissionPlan[
            this.isAdd ? 'add' : 'update'
          ](params)
          if (Number(res.code) === 1000) {
            this.$message.success(`${this.isAdd ? '新增' : '编辑'}成功！`)
            this.$emit('onFinish', 'carbon-emission-plan-add')
          }
        }
      })
    },
    /**
     * 规划所有数据
     */
    setAllValue() {
      console.log('-=-=123')
    }
  }
}
</script>

<style lang="scss" scoped>
.carbon-emission-plan-box {
  color: #333;
  padding: 0 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  ::v-deep .el-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .el-form-item {
      width: calc(50% - 10px);

      &.width100p {
        width: 100%;
      }

      .el-form-item__label {
        color: #666;
        font-size: 14px;
      }

      &.form-sub-title {
        width: 100%;

        .el-form-item__label {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          font-weight: bold;
          color: #333;
          font-size: 16px;
          line-height: 1;

          &::before {
            content: '';
            display: inline-block;
            width: 4px;
            height: 15px;
            background-color: #00858d;
            margin-right: 5px;
          }
        }
      }
    }

    .el-select,
    .el-cascader {
      width: 100%;
    }
  }
  .plan-form-top {
    .el-form {
      .el-form-item {
        width: calc(50% - 10px);
      }
    }
  }
  .sceneinfo-box {
    flex: 1;
    overflow: auto;
    .el-form {
      .el-form-item {
        width: calc(25% - 10px);
        margin-bottom: 0;
      }
    }
    .item-title {
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #42b983;
      line-height: 34px;
    }
    .floor-box {
      .item-form-floor {
        margin-left: 0;
        display: flex;
        justify-content: space-around;
        &::v-deep.el-form-item {
          width: 100%;
          margin-bottom: 22px;
          .el-form-item__label {
            flex-shrink: 0;
          }
          .el-form-item__content {
            margin-left: 0 !important;
            display: flex;
            align-items: center;
            display: flex;
            .el-input {
              width: calc(25%);
              margin-right: 10px;
              &:last-child.el-input {
                margin-right: 0;
              }
            }
          }
        }
      }
    }
  }
}
</style>
